<template>  
  <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">  
    <div class="goods-detail">
      <v-loadmore :top-method="init" ref="loadmore" :auto-fill="true">  
        <div class="img">
          <img :src="apiUrl + detail.goodsLogo" alt="">
        </div>
        <div style="padding: 20px;">
          <input type="text" v-model="count"> <br><br>
          <button @click="addVal">add</button> <br><br>
          <button @click="decreaseVal">decrease</button>
        </div>
        <div class="block info">
          <div class="title">{{ detail.goodsName }}</div>
          <div class="sub-title">{{ detail.goodsSub }}</div>
          <div class="goods-info">
            <div class="price">
              <span class="hot">&yen; {{ detail.goodsPrice }}</span>
              <span class="old">&yen; {{ detail.marketPrice }}</span>
            </div>
            <div class="sales">已售 {{ detail.saleCount }} 件</div>
          </div>
        </div>
        <div class="block detail-desc" v-html="detail.goodsDes"></div>
      </v-loadmore>
    </div>
  </div>  
</template>  
<script>  
  import {Loadmore} from 'mint-ui';  

  export default {  
    data:function() {  
      return {   
        detail: [],
        apiUrl: "",
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了  
        scrollMode:"auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动 
      }  
    },  
    components: {  
      'v-loadmore':Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题  
                              // 推荐应用组件时用a-b形式起名  
    },
    mounted () {
      this.init();
      console.log(this.store);
    },
    computed: {
      count () {
        console.log(this.$store);
        return "this.$store.state.count"
      }
    },
    methods: {
      init () {
        let me = this;
        this.IndicatorOpen();
        this.axiosReq().get(me.baseUrl() + "/product/detail/goodsId/" + me.$route.params.gid)
        .then(function (res) {
          if(res.data.status === 200) {
            me.detail = res.data.detail;
            me.apiUrl = res.data.apiUrl;
            me.Indicator.close();
            me.$refs.loadmore.onTopLoaded();
          } else {
            me.Toast('加载失败，请下拉刷新');
            me.Indicator.close();
          }
        })
        .catch(function (error) {
          me.Toast('页面加载失败');
          me.Indicator.close();
        });
      },
      addVal () {
        
      },
      decreaseVal () {

      }
    }
  }  
</script>

<style scoped lang="less">
  @import url('../../../static/var');

  .goods-detail {
    img {
      max-width: 100%;
    }
    .info {
      padding: 10px 15px;
      margin-bottom: 10px;
    }
    .title {
      font-size: @f14;
      margin-bottom: 5px;
    }
    .sub-title {
      color: @col-96;
      font-size: @f12;
    }
    .goods-info {
      overflow: hidden;
      div {
        padding: 10px 0 0;
        width: 50%;
        float: left;
        vertical-align: bottom;
      }
      .hot {
        font-size: @f16;
        color: @col-orange;
        margin-right: 10px;
      }
      .old {
        font-size: @f12;
        color: @col-92;
        text-decoration: line-through;
      }
      .sales {
        text-align: right;
      }
    }
    .detail-desc {
      width: 100%;
      p img {
        width: 100%;
      }
    }
  }
</style>